<template>
    <fieldset>
        <legend>{{name}}</legend>
        <ul>
            <li v-for ="item in carts" :key="item.id">
                <b>产品名称：{{item.title}}</b>
                ----
                <b>产品数量：{{item.count}}</b>
                ----
                <b>单价：{{item.price}}</b>
                ----
                <button @click="remove(item)">移除购物车</button>
            </li>
            
        </ul>

         <h1>
            总价:
            <span style="color:red">{{ total }}</span>
        </h1>
    </fieldset>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
//mapState("模块名称"，['属性名'])
export default {
    computed: {
        ...mapState('cart',['name','carts']),   
       ...mapGetters('cart',['total'])
    },mounted(){
       this.LOG()
    },methods:{
        ...mapMutations('cart',['LOG']) ,
        ...mapActions('cart',['REMOVE_CART']),
        remove(item){
           this.REMOVE_CART(item)
        }

    }
  }
</script>